<!--
 * @Author: Wangtao
 * @Date: 2020-09-21 09:55:09
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-13 19:41:33
-->
<template>
  <div class="ivr-config">
    <tabs
      :tabPane="tabPaneList"
      v-model="activeName"
      @tab-click="handleClick"
      @actionClick="actionClick"
    >
    </tabs>
    <keep-alive>
      <component
        :is="activeName"
        :ref="activeName"
        @handle-oprate="handleOprate"
      ></component>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import VoiceNavigation from './voiceNav/index.vue'
import satisfaction from './satisfaction/index.vue'
import voiceConfig from './voiceConfig/index.vue'
import { isHasFuncOrMenus } from '@/utils/common'
import { Store } from 'vuex'
interface TabObj {
  label: string,
  name: string,
  _id: string
}
@Component({
  name: 'ivr',
  components: { tabs, VoiceNavigation, satisfaction, voiceConfig }
})
export default class Ivr extends Vue {
  private activeName: string = 'VoiceNavigation'
  private $store: Store<any> | undefined
  private tabPaneList: TabObj[] = [{
    label: '语音导航',
    name: 'VoiceNavigation',
    _id: 'child_voice_navigation'
  },
  {
    label: '电话满意度',
    name: 'satisfaction',
    _id: 'telephone_satisfaction'
  },
  {
    label: '语音库',
    name: 'voiceConfig',
    _id: 'voice_database'
  }]

  private actionClick (action, data): void {
    this.$refs[this.activeName][action](data)
  }

  private beforeMount (): void {
    const arr = ['child_voice_navigation', 'telephone_satisfaction', 'voice_database', 'time_condition'] //  语音导航， 电话满意度，语音库， 时间条件
    const newArr: any[] = []
    arr.forEach((item: string) => {
      if (isHasFuncOrMenus(item, (this.$store as Store<any>).state.common.session.user, true)) {
        newArr.push(item)
      }
    })
    this.tabPaneList = this.tabPaneList.filter(item => newArr.indexOf(item._id) > -1)
    if ((this as any).$route.query.activeName != null) {
      (this as any).activeName = (this as any).$route.query.activeName;
    } else {
      this.activeName = this.tabPaneList[0] ? this.tabPaneList[0].name : 'VoiceNavigation'
    }
  }
}
</script>

<style lang="stylus" scoped>
.ivr-config
  height 100%
  position relative
</style>
